<script setup lang="ts">
import SList from '@/components/common/list/SList.vue'
import { useList } from '@/composables/list-composable'
import type { ResultData } from '@/api/service'
import type { Page } from '@/type/User'
import { roleListApi } from '@/api/role-api'
import type { RoleVo } from '@/type/system/role-types'
import { ref } from 'vue'
import RoleInfo from '@/views/role/RoleInfo.vue'
import SelectPremList from '@/views/perm/SelectPremList.vue'

const viewId = 'RoleList'
const { tableData, pageQuery, statement, total, tableLoading, search } = useList<RoleVo>(
  viewId,
  getData,
  () => {}
)

const roleInfoId = ref<string | undefined>()
const roleInfoDialog = ref<boolean>(false)
const permListDialog = ref<boolean>(false)
const permListTitle = ref<string>('角色下权限信息')

function getData() {
  tableLoading.value = true
  roleListApi(pageQuery).then((response: ResultData<Page<RoleVo[]>>) => {
    total.value = response.data.total
    tableData.value = response.data.modelList
    tableLoading.value = false
  })
}

function close() {
  roleInfoDialog.value = false
  getData()
}

function closePremList() {
  permListDialog.value = false
}

const methods = {
  edit: (item: RoleVo) => {
    roleInfoId.value = item.roleId
    roleInfoDialog.value = true
  },
  add: () => {
    roleInfoId.value = undefined
    roleInfoDialog.value = true
  },
  rolePerms: (item: RoleVo) => {
    permListTitle.value = `[${item.roleName}]：权限信息`
    roleInfoId.value = item.roleId
    permListDialog.value = true
  }
}
</script>

<template>
  <s-list
    :statement="statement"
    :data="tableData"
    :methods="methods"
    :total="total"
    :table-loading="tableLoading"
    :page-size="pageQuery.pageSize"
    @search="search"
  >
  </s-list>

  <el-dialog
    destroy-on-close
    :close-on-click-modal="false"
    v-model="roleInfoDialog"
    title="编辑角色信息"
    width="900"
  >
    <role-info :close="close" :query="{ roleId: roleInfoId }" />
  </el-dialog>

  <el-dialog
    destroy-on-close
    :close-on-click-modal="false"
    v-model="permListDialog"
    :title="permListTitle"
    width="1000"
  >
    <select-prem-list :close="closePremList" :role-id="roleInfoId!!"/>
  </el-dialog>
</template>

<style scoped></style>